
<template>
    <div ref="container" class="echarts-container" :style="{ width: props.width + 'px', height: '100%' }"></div>
</template>
<script setup lang="ts" name="OEELine">
import { ref, inject, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({
    width: {
        type: Number,
        default: 0
    },
    height: {
        type: Number,
        default: 0
    },
    id: {
        type: String,
        default: ''
    },
    dataX: {
        type: Array,
        default: ''
    },
    dataY: {
        type: Array,
        default: ''
    }
})
// 获取echart挂载的DOM节点
const container = ref();

// 赋值动态ref到变量
// const setItemRef = (el: any) => {
//     if (el) {
//         container.value = el
//     }
// }
// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer = ref();

// 通过 inject 接收Echarts
const Echarts = inject('$echarts');
const graphic:any = inject('$graphic');
const getFontSize: any = inject('$getfontSize');



const initEchartsOneFn = () => {
    // echarts初始化
    const myChart = (Echarts as any).init(container.value);
    
    const offsetX = 24;  //bar宽
    const offsetY = 6;   //倾斜角度
    // 绘制左侧面
    const CubeLeft = graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx:any, shape:any) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        // console.log(shape);
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - offsetX, shape.y - offsetY];
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
        const c3 = [xAxisPoint[0], xAxisPoint[1]];
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
    });
    // 绘制右侧面
    const CubeRight = graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx:any, shape:any) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y];
        const c2 = [xAxisPoint[0], xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
        const c4 = [shape.x + offsetX, shape.y - offsetY];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
    });
    // 绘制顶面
    const CubeTop = graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx:any, shape:any) {
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
        // const c3 = [shape.x, shape.y - offsetX];
        const c3 = [shape.x, shape.y - offsetY * 2];
        const c4 = [shape.x - offsetX, shape.y - offsetY];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
    });
    // 注册三个面图形
    graphic.registerShape('CubeLeft', CubeLeft);
    graphic.registerShape('CubeRight', CubeRight);
    graphic.registerShape('CubeTop', CubeTop);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            right: '3%',
            left: '5%',
            bottom: '12%'
        },
        xAxis: [{
            type: 'category',
            data: props.dataX,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFFF'
                }
            },
            axisLabel: {
                show: true,
                margin: 10,
                color: '#FFFF',
                textStyle: {
                    fontSize: getFontSize(16)
                },
            },
        }],
        yAxis: [{
            axisLabel: {
                show: true,
                formatter: '{value}',
                color: '#FFFF',
                textStyle: {
                    fontSize: getFontSize(16)
                },
            },
            axisTick: {       
                show: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFFF'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#FFFF'
                }
            }
        }],
        series: [{
         type: 'custom',
         barWidth: getFontSize(40),
         renderItem: (params:any, api:any) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
               type: 'group',
               children: [
                  {
                     type: 'CubeLeft',
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(147,72,93,1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147,72,93, .2)' // 100% 处的颜色
                        }], false),
                     },
                  },
                  {
                     type: 'CubeRight',
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ba6079' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(205, 98, 128, .2)' // 100% 处的颜色
                            }], false),
                     },
                  },
                  {
                     type: 'CubeTop',
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           {
                              offset: 0,
                              color: 'rgba(147,72,93,1)',
                           },
                           {
                              offset: 1,
                              color: 'rgba(147,72,93,1)',
                           },
                        ])
                     },
                  },
               ],
            };
         },
         data: props.dataY,
      },// 自定义立体图
      {
           
            data: props.dataY,
            type: 'bar',
            barWidth: getFontSize(40),
            itemStyle: {
                normal: {
                    color: 'transparent',
                    // new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //     offset: 0,
                    //     color: 'rgba(147,72,93,1)' // 0% 处的颜色
                    // }, {
                    //     offset: 1,
                    //     color: 'rgba(147,72,93, .2)' // 100% 处的颜色
                    // }], false),
                    // barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(147,72,93, .2)',
                    shadowBlur: 4,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    width: getFontSize(120),
                    height: getFontSize(40),
                    // distance: 1,
                    fontSize:getFontSize(20),
                    color: "#fff",
                    offset: [0, -15],
                }
            }
        }]
    };
    myChart.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}

// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);

// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>

<style scoped >
.chart {
    margin: 0 auto;
}
</style>


<style >
.chart canvas {
    margin-left: 2%;
}
</style>